<template>
	<u-tabs
		:current='current'
		:scrollable="scrollable"
		:lineWidth="lineWidth"
		:lineHeight="lineHeight"
		:list="tabList"
		:lineColor="lineBg"
		:keyName="keyName"
		:activeStyle="setActiveStyle"
		:inactiveStyle="setInactiveStyle"
		:itemStyle="selfStyle"
		@click="$emit('change',$event)">
	</u-tabs>
</template>

<script>
	import {OriginOssUrl} from '@/config/index.js'
	export default {
		name: "w-tabs",
		props: {
			// 数据
			tabList: {
				type: Array,
				default: () => {
					return []
				}
			},
			keyName:{
				type: String,
				default: 'name'
			},
			// 右侧图标
			rightIcon: {
				type: String,
				default: ''
			},
			// 是否可滑动
			scrollable: {
				type: Boolean,
				default: false
			},
			// 滑块宽度
			lineWidth: {
				type: Number | String,
				default: 47
			},
			// 滑块高度
			lineHeight: {
				type: Number | String,
				default: 4
			},
			// 滑块背景
			lineBg: {
				type: String,
				default:'#1F52F8'
				// default: () => {
				// 	let imgUrl =`${OriginOssUrl}/static/bg/vector.png`
				// 	return `url(${imgUrl}) 100% 100%`
				// }
			},
			// 选中样式
			activeStyle: {
				type: Object
			},
			// 未选中样式
			inactiveStyle: {
				type: Object
			},
			itemStyle: {
				type: Object,
				default: () => {
					return {

					}
				}
			},
			current:{
				type:Number,
				default:0
			}
		},
		computed: {
			setActiveStyle() {
				let style = {
					color: '#1F52F8',
					fontWeight: 'bold',
					fontSize: '32rpx'
				}
				for (let k in this.activeStyle) {
					style[k] = this.activeStyle[k]
				}
				return style
			},
			setInactiveStyle() {
				let style = {
					color: '#666666',
					fontSize: '32rpx'
				}
				for (let k in this.inactiveStyle) {
					style[k] = this.inactiveStyle[k]
				}
				return style
			},
			selfStyle() {
				let baseStyle = {
					'padding-left': '15px',
					'padding-right': '15px',
					'height': '44px',
					'position': 'relative',
					'z-index': 1
				}
				for (let k in this.itemStyle) {
					baseStyle[k] = this.itemStyle[k]
				}
				return baseStyle
			}
		},
		data() {
			return {

			}

		}
	}
</script>
